<template>
  <div class="me-server-config">
    <BaseFooter :init-tab="5" />
    <!-- 标题栏 -->
    <div class="header">
      <h2 class="title">服务器配置</h2>
    </div>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 当前配置状态 -->
      <div class="status-card">
        <div class="status-header">
          <span class="status-label">当前配置状态</span>
          <span class="status-indicator" :class="{ active: isConfigured }">
            {{ isConfigured ? '已配置' : '未配置' }}
          </span>
        </div>
        <div class="current-url">
          <span class="label">API地址:</span>
          <span class="value">{{ currentApiUrl || '未设置' }}</span>
        </div>
      </div>

      <!-- 配置表单 -->
      <div class="config-form">
        <div class="form-group">
          <label for="apiBaseUrl">API服务器地址</label>
          <input
            id="apiBaseUrl"
            v-model="serverConfig.apiBaseUrl"
            type="text"
            placeholder="例如: http://192.168.50.166:8082"
            :class="{ error: hasError }"
            @input="validateUrl"
            @click="$event.stopPropagation()"
            @focus="$event.stopPropagation()"
          />
          <div v-if="hasError" class="error-message">
            请输入有效的HTTP/HTTPS URL格式
          </div>
        </div>

        <!-- 快捷地址按钮 -->
        <div class="quick-addresses">
          <div class="quick-title">常用地址:</div>
          <div class="quick-buttons">
            <button
              v-for="(address, index) in quickAddresses"
              :key="index"
              class="quick-btn"
              @click="setQuickAddress(address)"
            >
              {{ address.name }}
            </button>
          </div>
        </div>

        <!-- 数据源预览 -->
        <div class="data-source-preview" v-if="serverConfig.apiBaseUrl">
          <div class="preview-title">数据源预览:</div>
          <div class="preview-content">
            <div class="data-item">
              <span class="label">视频API:</span>
              <span class="value">{{ serverConfig.apiBaseUrl }}/api/videos</span>
            </div>
            <div class="data-item">
              <span class="label">用户API:</span>
              <span class="value">{{ serverConfig.apiBaseUrl }}/api/users</span>
            </div>
            <div class="data-item">
              <span class="label">配置API:</span>
              <span class="value">{{ serverConfig.apiBaseUrl }}/api/config</span>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="btn btn-reset" @click="resetConfig">重置</button>
          <button class="btn btn-save" @click="saveConfig" :disabled="hasError">
            保存配置
          </button>
        </div>

        <!-- 使用说明 -->
        <div class="instructions">
          <h3>使用说明</h3>
          <ul>
            <li>📱 设置后可在手机App和浏览器中同步使用</li>
            <li>🔄 保存后需要刷新页面才能生效</li>
            <li>🌐 支持HTTP和HTTPS协议</li>
            <li>💾 配置会保存在浏览器本地存储中</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 成功提示弹窗 -->
    <div v-if="showSuccess" class="success-modal">
      <div class="modal-content">
        <div class="success-icon">✓</div>
        <h3>配置保存成功！</h3>
        <p>请刷新页面使配置生效</p>
        <div class="modal-buttons">
          <button class="btn btn-cancel" @click="closeSuccess">稍后刷新</button>
          <button class="btn btn-confirm" @click="refreshPage">立即刷新</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseFooter from '@/components/BaseFooter.vue'

export default {
  name: 'Me',
  data() {
    return {
      serverConfig: {
        apiBaseUrl: ''
      },
      hasError: false,
      showSuccess: false,
      quickAddresses: [
        { name: '本地开发', url: 'http://192.168.50.166:8082' },
        { name: '测试环境', url: 'http://test.api.com' },
        { name: '生产环境', url: 'https://api.mocaweb.com' }
      ]
    }
  },
  computed: {
    currentApiUrl() {
      const savedConfig = this.getServerConfig()
      return savedConfig.apiBaseUrl || ''
    },
    isConfigured() {
      return !!this.currentApiUrl
    }
  },
  mounted() {
    this.initServerConfig()
  },
  methods: {
    initServerConfig() {
      const savedConfig = this.getServerConfig()
      this.serverConfig.apiBaseUrl = savedConfig.apiBaseUrl || ''
    },
    
    getServerConfig() {
      try {
        const config = localStorage.getItem('serverConfig')
        return config ? JSON.parse(config) : {}
      } catch (error) {
        console.error('读取服务器配置失败:', error)
        return {}
      }
    },
    
    validateUrl() {
      const urlPattern = /^(http|https):\/\/[^\s]+$/
      this.hasError = this.serverConfig.apiBaseUrl && !urlPattern.test(this.serverConfig.apiBaseUrl)
    },
    
    setQuickAddress(address) {
      this.serverConfig.apiBaseUrl = address.url
      this.validateUrl()
    },
    
    resetConfig() {
      this.serverConfig.apiBaseUrl = ''
      this.hasError = false
      localStorage.removeItem('serverConfig')
    },
    
    saveConfig() {
      if (this.hasError) return
      
      try {
        localStorage.setItem('serverConfig', JSON.stringify(this.serverConfig))
        this.showSuccess = true
      } catch (error) {
        console.error('保存配置失败:', error)
        alert('保存失败，请检查配置格式')
      }
    },
    
    closeSuccess() {
      this.showSuccess = false
    },
    
    refreshPage() {
      window.location.reload()
    }
  }
}
</script>

<style scoped lang="less">
.me-server-config {
  min-height: 100vh;
  background: var(--main-bg);
  
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--active-main-bg);
    border-bottom: 1px solid var(--line-color);
    
    .title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: white;
    }
  }
  
  .content {
    padding: 16px;
    padding-bottom: calc(var(--footer-height) + 16px);
    
    .status-card {
      background: var(--active-main-bg);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      border: 1px solid var(--line-color);
      
      .status-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        
        .status-label {
          font-size: 14px;
          color: var(--second-text-color);
        }
        
        .status-indicator {
          padding: 4px 12px;
          border-radius: 12px;
          font-size: 12px;
          background: var(--second-btn-color);
          color: var(--second-text-color);
          
          &.active {
            background: var(--primary-btn-color);
            color: white;
          }
        }
      }
      
      .current-url {
        .label {
          font-size: 12px;
          color: var(--second-text-color);
          margin-right: 8px;
        }
        
        .value {
          font-size: 14px;
          color: white;
          word-break: break-all;
        }
      }
    }
    
    .config-form {
      background: var(--active-main-bg);
      border-radius: 12px;
      padding: 16px;
      border: 1px solid var(--line-color);
      
      .form-group {
        margin-bottom: 20px;
        
        label {
          display: block;
          margin-bottom: 8px;
          font-size: 14px;
          font-weight: 500;
          color: white;
        }
        
        input {
          width: 100%;
          box-sizing: border-box;
          padding: 12px;
          border: 1px solid var(--line-color);
          border-radius: 8px;
          font-size: 14px;
          background: var(--active-main-bg);
          color: white;
          
          &.error {
            border-color: #ff4d4f;
          }
          
          &:focus {
            outline: none;
            border-color: var(--primary-btn-color);
          }
          
          &::placeholder {
            color: var(--second-text-color);
          }
        }
        
        .error-message {
          color: #ff4d4f;
          font-size: 12px;
          margin-top: 4px;
        }
      }
      
      .quick-addresses {
        margin-bottom: 20px;
        
        .quick-title {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 8px;
          color: white;
        }
        
        .quick-buttons {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          
          .quick-btn {
            padding: 8px 12px;
            border: 1px solid var(--line-color);
            border-radius: 6px;
            background: var(--second-btn-color);
            font-size: 12px;
            color: var(--second-text-color);
            
            &:hover {
              background: var(--primary-btn-color);
              color: white;
            }
          }
        }
      }
      
      .data-source-preview {
        background: var(--active-main-bg);
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 20px;
        border: 1px solid var(--line-color);
        
        .preview-title {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 8px;
          color: white;
        }
        
        .data-item {
          display: flex;
          margin-bottom: 4px;
          
          .label {
            font-size: 12px;
            color: var(--second-text-color);
            min-width: 60px;
          }
          
          .value {
            font-size: 12px;
            color: var(--second-text-color);
            word-break: break-all;
          }
        }
      }
      
      .action-buttons {
        display: flex;
        gap: 12px;
        
        .btn {
          flex: 1;
          padding: 12px;
          border: none;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          
          &.btn-reset {
            background: var(--second-btn-color);
            color: var(--second-text-color);
            
            &:hover {
              background: var(--active-main-bg);
              border: 1px solid var(--line-color);
            }
          }
          
          &.btn-save {
            background: var(--primary-btn-color);
            color: white;
            
            &:hover:not(:disabled) {
              background: var(--disable-primary-btn-color);
            }
            
            &:disabled {
              background: var(--second-btn-color);
              color: var(--second-text-color);
              cursor: not-allowed;
            }
          }
        }
      }
      
      .instructions {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid var(--line-color);
        
        h3 {
          margin: 0 0 12px 0;
          font-size: 16px;
          color: white;
        }
        
        ul {
          margin: 0;
          padding-left: 16px;
          
          li {
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--second-text-color);
          }
        }
      }
    }
  }
  
  .success-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    
    .modal-content {
      background: white;
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      max-width: 300px;
      width: 80%;
      
      .success-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #52c41a;
        color: white;
        font-size: 24px;
        line-height: 48px;
        margin: 0 auto 16px;
      }
      
      h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
        color: #333;
      }
      
      p {
        margin: 0 0 20px 0;
        font-size: 14px;
        color: #666;
      }
      
      .modal-buttons {
        display: flex;
        gap: 12px;
        
        .btn {
          flex: 1;
          padding: 8px 12px;
          border: none;
          border-radius: 6px;
          font-size: 14px;
          cursor: pointer;
          
          &.btn-cancel {
            background: black;
            color: #666;
          }
          
          &.btn-confirm {
            background: #1890ff;
            color: white;
          }
        }
      }
    }
  }
}
</style>